/* 布局盒子 */
.container{
    width:1000px;
    /* 块级元素水平居中 */
    margin:0 auto;
   
}
/* 左边 */
.left{
    
    position: relative;
    float: left;
    width:285px;
    height: 1230px;
    background:#4A4E59;
   
}
.left>span{
    /* 通过上面的left设置的position，运用子绝父相把zuo移动到看不到的位置 */
   position: absolute;
    text-indent:-9999px ;
}
.left>.head{
    width:100%;
    height:70px;
    background:url('../images/title.png') no-repeat;
    /* 背景图居中 */
    background-position: center;
    text-indent: -999px;
}
.left>.aim{
    font-size: 10px;
    font-weight: bold;
    color:white;
    /* 文本居中 */
    text-align: center;
}
.left>.headerpic{
    width:225px;
    /* 图片水平居中 */
    margin: 0 auto;
}
.left>h1{
    font-size:35px;
    color: white;
    text-align: center;
    /* 加粗 */
    font-weight: bold;
    /* 行高 */
    line-height: 60px;
    /* 调节字母之间的间距 */
    /* letter-spacing: 20px; */
}
.left>h2{
    color: white;
    text-align: center;
    /* 行高 */
    line-height: 40px;
}
/* 改变技能证书上面的高度 */
.left>ul>:nth-child(2){
    padding-top: 30px;
}
/* 改变自我评价上面的高度 */
.left>ul>:nth-child(3){
    padding-top: 30px;
}

.left>ul>li>.left-title{
    position: relative;
    height:45px;
    width:100%;
    
}
.left>ul>li>.left-title>h3{
    position: absolute;
    color:white;
    z-index: 2;
    text-indent: 60px;
    letter-spacing: 8px;
    font-size: 20px;
    font-weight: bold;
    top: 5px;    

}
/* 用::after可以在后面超出范围 */
.left>ul>li>.left-title::after{
    /* 不管有没有设置什么伪元素中都要写 */
    content: '';
    /* 变成块级元素 */
    position: absolute;
    right: -55px;
    top:-18px;
    display: block;
    width:335px;  
    height:75px;
    background:url('../images/left-title-bg.png') no-repeat;
    background-size: 325px 75px;
    z-index: 1;  
}
.left>ul>li>ul>li{
    position: relative;
    color:white;
    line-height: 40px;
    font-size: 18px;
    padding-left:85px     ;
}
.left>ul>li>ul>li::before{
    content: '';
    position: absolute;
    top:12px;
    left: 50px ;
    width:20px;
    height: 20px;
    background:url('../images/icon-birth.png') no-repeat;
    background-size: 100% auto;
}
.left>ul>li>ul>li:nth-child(2)::before{
    background:url('../images/icon-home.png') no-repeat;
}
.left>ul>li>ul>li:nth-child(3)::before{
    background:url('../images/icon-phone.png') no-repeat;
}
.left>ul>li>ul>li:last-child()::before{
    background:url('../images/icon-msg.png') no-repeat;
}
.left>ul>li>p{
    color: white;
    font-size: 15px;
    line-height: 40px;
    padding-left: 40px;

}
.left>.left-footer-img{
    height: 80px;
    padding-left: 23px;
}
.left>.left-footer-img>img{
    margin-top:8px; 
}
/* 右边 */
.reight{
    position: relative;
    float:right;
    width:665px;
    height: 1230px;
    background:#F5F5F5;
    padding-left: 50px;
}
.reight>span{
    /* 通过上面的reight设置的position，运用子绝父相把zuo移动到看不到的位置 */
    position: absolute;
    text-indent: 9999px;
}
.reight>.right-title-img{
    float: right;
    overflow: hidden;
}
/* ul中的内容距离顶点50px,也就是教育背景等等的背景色，下面的工作经历以此向下平移 */
.reight>ul{
    margin-top: 50px;
}
/* li中所有的字体都是16px，字体三色都是#4A4E59; */
.reight>ul>li{
    font-size: 16px;
    color:#4A4E59;
}
.reight>ul>li>.right-bg{
    width: 648px;
    height: 65px;
    background:url('../images/right-title-bg.png') no-repeat;
    /* 设置背景的大小，长度增加到648px */
    background-size: 648px auto;
    color:#11A0A8;
    font-size: 22px;
    padding-left: 48px;
    padding-top: 20px; 
}
.reight>ul>li>.right-bg>span{
    color:white;
    font-size: 15px;
    margin-left: 30px;
}
.reight>ul>li>h2{
    font-size: 16px;
    margin-left: 15px;

}
.reight>ul>li>p{
    line-height: 37px;
    margin-left: 15px;
}
.reight>ul>li>ul>li{
    list-style: disc;
    margin-left: 60px;
}
.reight>ul>li>ul>li{
    line-height: 37px;
}